import React from 'react';
import {Button, Card, message, Modal, Table} from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils';


export default class BasicTable extends React.Component {
    state = {
        dataSource2: [],
        selectCheckRowKeys: []
    };

    params = {
        page: 1
    };

    componentDidMount() {
        const dataSource = [
            {
                id: '0',
                userName: 'Jack',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '2000-01-01',
                address: '北京市海淀区奥林匹克公园',
                time: '09:00'
            },
            {
                id: '1',
                userName: 'Tom',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '2000-01-01',
                address: '北京市海淀区奥林匹克公园',
                time: '09:00'
            },
            {
                id: '2',
                userName: 'Lily',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '2000-01-01',
                address: '北京市海淀区奥林匹克公园',
                time: '09:00'
            },


        ]
        this.setState({
            dataSource
        });
        dataSource.map((item, index) => {
            item.key = index;
        })
        this.request();

    }

//动态获取mock数据
    request = () => {
        axios.ajax({
            url: '/table/list',
            data: {
                params: {
                    page: this.params.page
                },
                //isShowLoading 默认是true,除非某些接口不希望通过loading加载可以另外设置
                isShowLoading: false

            }

        }).then((res) => {
            if (res.code == '0') {
                console.log('res.result.list', res.result);
                res.result.list.map((item, index) => {
                    item.key = index;
                })

                this.setState({
                    dataSource2: res.result.list,
                    selectCheckRowKeys: [],   //删除后状态重置！！
                    selectRows: null,
                    //公共机制封装的分页
                    pagination: Utils.pagination(res, (current) => {
                        this.params.page = current
                        this.request();

                    })
                })
            }

        })

    };
    //单选选中行
    onRowClick = (record, index) => {

        Modal.info({
            title: '提示',
            content: `选中信息：${record.userName}`
        })
        let selectKey = [index];
        console.log('selectKey', selectKey);

        this.setState({
            selectRowKeys: selectKey,
            selectItem: record
        })

    };


    //多选、选中的删除动作
    handleDelete = () => {
        let Ids = this.state.selectedRows.map((item) => {
            return item.id;
        })

        Modal.confirm({
            title: '删除提示',
            content: `您确认删除${Ids.join(',')}`,
            onOk: () => {
                message.success('删除成功！')
                this.request();
            }
        })

    };


    render() {
        const columns = [
            {
                title: 'id',
                key: 'id',
                dataIndex: 'id'
            },
            {
                title: '用户名',
                key: 'userName',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                key: 'sex',
                dataIndex: 'sex',
                render(sex, record, index) {
                    return sex = 1 ? ' 男' : '女'
                }
            },
            {
                title: '状态',
                key: 'state',
                dataIndex: 'state',
                render(state, record, index) {
                    let selectState = {
                        '1': '老师',
                        '2': '程序员',
                        '3': '创业者',
                        '4': '企业家',
                        '5': '读书人',
                    }
                    return selectState[state]
                }

            },
            {
                title: '爱好',
                key: 'interest',
                dataIndex: 'interest',
                render(interest, record, index) {
                    let selectInterest = {
                        '1': '读书',
                        '2': '绘画',
                        '3': '篮球',
                        '4': '摄影',
                        '5': '足球',
                        '6': '羽毛球',
                        '7': '吃饭饭',
                        '8': '毽子',
                    }
                    return selectInterest[interest]
                }
            },
            {
                title: '生日',
                key: 'birthday',
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                key: 'address',
                dataIndex: 'address'
            },
            {
                title: '早起时间',
                key: 'time',
                dataIndex: 'time'
            }

        ];
        //！！！ selectedRowKeys记住这个单词必须叫selectedRowKeys
        const rowSelection = {
            type: 'radio',
            selectedRowKeys: this.state.selectRowKeys

        };
        const rowCheckSelection = {
            type: 'checkbox',
            selectedRowKeys: this.state.selectCheckRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                let Ids = selectedRows.map((item) => {
                    return item.id
                });

                this.setState({
                    selectCheckRowKeys: selectedRowKeys,
                    selectedRows,
                    selectedIds: Ids

                })

            }

        };
        return (
            <div>
                <Card title="基础表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={false}

                    />
                </Card>
                <Card title="mock动态渲染数据表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={false}

                    />
                </Card>
                <Card title="mock动态渲染单选数据表格">
                    <Table
                        // rowKey={id}
                        bordered
                        rowSelection={rowSelection}
                        onRow={(record, index) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record, index)
                                },   //点击行

                            }
                        }}
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={false}

                    />
                </Card>
                <Card title="mock动态渲染多选数据表格">
                    <div style={{marginBottom: 10}}>
                        <Button type="primary" onClick={this.handleDelete}>删除</Button>
                    </div>
                    <Table
                        bordered
                        rowSelection={rowCheckSelection}
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={this.state.pagination}

                    />
                </Card>


            </div>

        );
    }

}
